<!-- index.html -->
<!doctype html>
<html>
    <head>
        <title>International Return - Add Country</title>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <!-- load bootstrap via CDN -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!-- load jquery via CDN -->
        <!-- load custom javascript file -->
        <script src="magic.js"></script> 
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".tooltip-examples a").tooltip({
                    placement: 'bottom',
                    animation: 'true',
                    delay: { show: 100, hide: 500 }
                });
            });
        </script>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
	.bs-example{
    	margin: 100px 50px;
    }
</style>

<!--
Trying to disable button once clicked and stay disbaled until item added to db or error encountered
should not disable if not passing validation i.e. if number ..error if foreign character ...error. only accepting letters.
<script>
    $("#submitbutton").click(
   function() {
      alert("Sending...");
      window.location.replace("path to url");
   }
);</script>-->
    </head>
<body>
    <!-- load our navbar... include means code for this section only changes in one area -->
 <?php include('navBar.php'); ?>
    
    
    <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
	<h1 align="center">Countries Already in Database:</h1>
    <!--		
        Show countries currently in database. This will help the user,
        incase they are adding an already added country. If country added successfully refresh countries
        retrieved from DB... ajax so page does not need to reload? If country exist in database don't allow it to insert and return an ok confirm box.
        when retreiving data from db place into table 50 x 50 and apply css to this table, color etc.
    -->
    </div>
    
    <div class="col-sm-5 col-md-6">
	<h1 align="center">Add a new Country?</h1>
        <!-- FORM -->
	<form action="process.php" id="form" method="POST">
                <div id="country-group" class="form-group">
			<label for="country">Country Name</label>
                        <input type="text" class="form-control" name="email" placeholder="Enter Country Name Here" size="36" maxlength="36">
			<!-- errors will go here -->
		</div>
      <!--		
          When adding new country the db will need to generate countryId 
          so the insert into must insert both the value from this form and an auto generated country id ( a ? in the insert into)
          
          Needs an insert function that will take the db name table name and values to insert.
             
          Disable submit button once clicked so multiple additions don't happen. a confirm box showing the country added
          and the country id that has been generated.
               
          Maxlength is 36 as this is the longest country in the world name. will limit possible sql injection as text characters limited.
		          
       -->
             
                <div id='submitbutton'<button type="submit" class="btn btn-success">Submit...<span class="fa fa-arrow-right"></span></button>
                </div>        
	</form>
</div>
</body>
</html>